<template>
<div>
    <el-row type="flex" justify="center">
        <img src="../assets/zhilogo.png" />
    </el-row>
    <el-row type="flex" justify="center">
        <el-card>
            <el-form>
                <el-form-item label="用户名">
                    <el-input placeholder="输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="输入密码" v-model="user.password" type="password"></el-input>
                </el-form-item>
                <div style="display:flex">
                    <el-input placeholder="输入验证码" v-model="user.code" class="codeInput">

                    </el-input>

                    <img :src="captcherImgUrl" alt="" class="cap" @click="changeCapcher">
                </div>
                <!--                    装饰-->
                <el-row type="flex" justify="space-between" style="margin-top: 20px">
                    <el-col :span="6">
                        <a>海外手机号</a>
                    </el-col>
                    <el-col :span="6">
                        <a>忘记密码</a>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-button type="primary" class="loginButton" style="margin-top: 10px" @click="login">登陆</el-button>
                </el-row>
            </el-form>
        </el-card>
    </el-row>
</div>
</template>

<script>
import {
    postLogin
} from "../api";

export default {
    name: "login",
    inject: ['reload'],
    data() {
        return {
            user: {
                username: "",
                password: "",
                code: ''
            },
            //验证码URL
            captcherImgUrl: 'http://localhost:8080/cap'

        };
    },
    methods: {
        login() {
            postLogin(this.user.username, this.user.password, this.user.code)
                .then(result => {
                    console.log(result)
                    if (result.data.code == 200) {
                        console.log(result);
                        console.log(result.data.userinfo.token);

                        this.$store.commit('set_token', result.data.userinfo.token);
                        this.$store.commit('setUserID', result.data.userinfo.uid);
                        this.$store.commit('setUserInfo', result.data.userinfo.username)

                        this.$notify({
                            title: "登录成功",
                            type: "success",
                            showClose: false,
                            duration: 1000
                        });
                        this.reload();
                        //跳转到主页面
                        setTimeout(() => {
                            this.$router.push("/index");
                        }, 1000);
                    } else {
                        this.$message.error(result.data.errorMsg);
                        this.changeCapcher();
                    }
                })
        },
        changeCapcher() {
            this.captcherImgUrl = "http://localhost:8080/cap?time=" + new Date()

        }

    },

};
</script>

<style scoped>
img {
    width: 150px;
    height: 100px;
}

.el-card {
    margin-top: 5px;
    width: 400px;
    height: 460px;
}

.cap {
    height: 40px;
    width: 80px;
    margin-left: 10px;
}

.codeInput {
    width: 200px;
}

.loginButton {
    width: 94%;
}
</style>
